<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FileUpload</title>

    <!-- 引入 jquery -->
    <script src="./assets/jquery/js/jquery.min.js"></script>

    <!-- 引入 bootstrip -->
    <link rel="stylesheet"  href="./assets/bootstrap3/css/bootstrap.min.css">
    <script src="./assets/bootstrap3/js/bootstrap.min.js"></script>

    <!-- 引入 Font Awesome 样式(依赖 ../fonts) -->
    <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css" />

    <!-- 引入 fileinput -->
    <link rel="stylesheet" href="assets/bootstrap-fileinput/css/fileinput.min.css" />
    <script src="assets/bootstrap-fileinput/js/fileinput.min.js"></script>
    <!-- fileinput / fa / fas / gly 主题 -->
    <script src="assets/bootstrap-fileinput/themes/fa/theme.min.js"></script>
    <script src="assets/bootstrap-fileinput/themes/fas/theme.min.js"></script>
    <script src="assets/bootstrap-fileinput/themes/gly/theme.min.js"></script>

    <!-- 引入 fileinput explorer / explorer-fa / explorer-fas 主题 -->
    <script src="assets/bootstrap-fileinput/themes/explorer/theme.min.js"></script>
    <script src="assets/bootstrap-fileinput/themes/explorer-fa/theme.min.js"></script>
    <script src="assets/bootstrap-fileinput/themes/explorer-fas/theme.min.js"></script>
    
    <!-- 引入 fileinput Language -->
    <script src="assets/bootstrap-fileinput/js/locales/LANG.js"></script>

    <!-- 引入 axios -->
    <script src="assets/axios/js/axios.min.js"></script>

    <!-- 自定义 Youwant -->
    <link rel="stylesheet" href="assets/youwant/css/scrollbar.css" >
    <script src="assets/youwant/js/element.js"></script>
    <script src="assets/youwant/js/utils.js"></script>

</head>

<body>

    <div class="container">

        <h1>FileUpload</h1>
        <nav class="navbar navbar-default navbar-inverse" role="navigation">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <!-- 综合折叠 -->
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#" >
                    <img class="pull-left logo" style="width: 1em" src="./assets/youwant/img/youwant-creator.png" />
                </a>
            </div>
        
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/pastebin">Pastebin</a></li>
                    <li><a href="/npmsearch">NPM 搜索</a></li>
                    <li class="active"><a href="/fileupload">文件上传</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="/fileupload/old">返回旧版</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </nav>
        
        <div class="panel panel-default">
            <div class="panel panel-default" style="margin-bottom: 0px;">
                <div class="panel-heading">
                    <div class="panel-title">
                        <div class="btn-group">
                            <button class="btn btn-default" data-toggle="modal" data-target="#fumodal">
                                上传文件
                            </button>
                        </div>

                        <div class="col-xs-7 col-sm-6 col-md-5 col-lg-5 pull-right">
                            <div class="input-group">
                                <div class="input-group-addon hidden-xs">搜索:</div>
                                <input id="file-search" type="text" class="form-control" placeholder="关键词...">
                            </div>
                        </div>
                    </div>
                </div>

                  <div class="panel-body" style="max-height: 750px;overflow-y: scroll;">
                      <table class="table table-hover">
                          <thead>
                              <tr>
                                  <th>编号</th>
                                  <!-- <th>UUID</th> -->
                                  <th>名称</th>
                                  <th>大小</th>
                                  <th class="hidden-xs">创建时间</th>
                                  <th class="text-center">操作</th>
                              </tr>
                          </thead>
                          <tbody id="tbody_file">
                              <!-- <tr>
                                  <th>1</th>
                                  <td>-</td>
                                  <td>systemd</td>
                                  <td>-</td>
                                  <td>OK</td>
                              </tr> -->
                          </tbody>
                      </table>
                  </div>
            </div>
            
        </div>
        
    </div>

    <!-- FileUpload 上传文件 -->
    <div class="modal fade" id="fumodal" role="dialog" aria-hidden="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <div class="modal-title">文件上传</div>
                </div>
                <div class="modal-body">
                    <!-- 主体上传文件面板 -->
                    <div class="file-loading"></div>
                    <br/>
                    <input id="file-uploader" type="file" name="file-data">
                    <!-- 主体上传文件面板 -->
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>

    <script>
        var tbody_file = document.querySelector("#tbody_file");

        var all = []
        registerEventHandler("#file-search", "input", (event)=>{
            let value = String(event.target.value).toLocaleLowerCase();
            $(tbody_file).children().each(function(index, element){element.remove()})

            valueListKeySearchAfter(value, all, "Name", createFileUpload)
        })

        function createFileUpload(data,i) {

            tbody_file.appendChild(
                // tr 行数据
                createElementAfter('tr', (element) => {
                    // 编号
                    element.appendChild(
                        createElementAfter("th", (element) => {
                            element.innerHTML = data[i]["Id"]
                        })
                    );
                    // 名称
                    element.appendChild(
                        createElementAfter("td", (element) => {
                            element.innerHTML = data[i]["Name"]
                        })
                    );
                    // 大小
                    element.appendChild(
                        createElementAfter("td", (element) => {
                            element.innerHTML = data[i]["Size"]
                        })
                    );
                    // 创建时间
                    element.appendChild(
                        createElementAfter("td", (element) => {
                            element.innerHTML = data[i]["CreateAt"]
                            element.setAttribute("class", "hidden-xs")
                        })
                    );
                    // download
                    element.appendChild(
                        createElementAfter("td", (element) => {
                            element.setAttribute("class", "text-center")
                            element.appendChild(
                                createElementAfter("a", (download) => {
                                    download.href = "/fileupload/download/"+data[i]["Uuid"]
                                    download.innerHTML = "下载";
                                    download.setAttribute("class", "btn btn-primary btn-bigbtn")
                                })
                            )
                        })
                    )
                })
            )
        }

        $.ajax({
            url: "/fileupload/api/files",
            method: "GET",
            success: function(data, textStatus, jqXHR) {
                if (data !== null)  {
                    all = data
                    for (let i = 0; i < data.length; i ++) {
                        createFileUpload(data, i)
                    }
                }
            }
        })

        $(document).ready(function() {
            $("#file-uploader").fileinput({
                // 基本配置
                language: "zh",
                theme: "fa",

                // 拖拽标题配置
                dropZoneTitle: "将文件拖放到这里",
                // dropZoneClickTitle: "Fuck",

                // 
                dropZoneEnabled: true,

                // 底部按钮配置
                showCaption: true,
                showRemove: true,
                showUpload: true,
                showBrowse: true,
                // 底部按钮文字
                removeLabel:"清空",
                uploadLabel: "上传",
                browseLabel: "浏览...",
                
                // 文件活动面板配置
                fileActionSettings: {
                    // 底部按钮配置
                    // showUpload: true,
                    // showRemove: true,
                    // showZoom: true,
                    
                    // showDownload: true,
                    
                    // showDrag: true,

                    // removeIcon: '<i class="fa fa-trash"></i>',
                    // removeClass: 'btn btn-danger btn-sm'
                },
                // 预览配置 ['image', 'html', 'text', 'video', 'audio', 'flash', 'object','other']
                previewFileType: [
                    'image', 'video', 'audio', 'flash'
                ],

                // 上传配置
                uploadUrl: "/fileupload/api/upload",
                minFileCount: 1,
                // maxFileCount: 5,
                uploadExtraData: {
                    
                }
                // 可触发事件 filereset, fileclear, filecleared, fileloaded, fileerror
            }).on("filereset", function(e) {
                console.log('filereset')
            }).on("fileclear", function(e) {
                console.log('fileclear')
            }).on("filecleared", function(e) {
                console.log('filecleared')
            }).on("fileloaded", function(e) {
                console.log('fileloaded')
                
            }).on("fileerror", function(e) {
                console.log('fileerror')
            })
            // 文件上传完成事件
            .on("fileuploaded", function(e) {
                console.log('fileuploaded')
                fetch("/fileupload/api/files").then(function(response) {
                    response.status == 200 ? function(response){
                        response.json().then((value) => {
                            all = value
                            $(tbody_file).children().each(function(index, element){element.remove()})
                            for (let i = 0; i < value.length; i ++) {
                                createFileUpload(value, i)
                            }
                        })
                    }(response)
                    : console.log(response.status)
                })
            }).on('fileuploaded', function(event, previewId, index, fileId) {
                console.log('File Uploaded', 'ID: ' + fileId + ', Thumb ID: ' + previewId);
            }).on('fileuploaderror', function(event, data, msg) {
                console.log('File Upload Error', 'ID: ' + data.fileId + ', Thumb ID: ' + data.previewId);
            }).on('filebatchuploadcomplete', function(event, preview, config, tags, extraData) {
                console.log('File Batch Uploaded', preview, config, tags, extraData);
            });
        })
        
    </script>
</body>
</html>